<!--
 * @Descripttion: 
 * @version: 
 * @Author: 川杨
 * @Date: 2022-02-23 15:59:54
 * @LastEditors: 川杨
 * @LastEditTime: 2022-02-28 09:43:56
-->
<style lang="scss" src="./At.scss"></style>

<template>
  <div ref="wrap"
       class="biz-comment-atwho-wrap"
       @compositionstart="handleCompositionStart"
       @compositionend="handleCompositionEnd"
       @input="handleInput()"
       @keydown.capture="handleKeyDown"
  >
    <div v-if="atwho"
         class="atwho-panel"
         :style="style"
    >
      <div class="atwho-inner">
        <div class="atwho-view" v-loading="atwho.list.length===0" :style="direction=='bottom'?'top:24px;bottom:auto;':''">
          <ul class="atwho-ul">
            <li v-for="(item, index) in atwho.list"
                class="atwho-li"
                :key="item.userId"
                :class="isCur(index) && 'atwho-cur'"
                :ref="isCur(index) && 'cur'"
                :data-index="index"
                @mouseenter="handleItemHover"
                @click="handleItemClick"
            >
              <slot name="item" :user="item">
                <span v-text="itemName(item)"></span>
              </slot>
            </li>
            <li v-if="!atwho.chunk&&atwho.list.length>0">
              <span class="search-tip">{{$t('component.bizAt.inputNameSearchMore')}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <span v-show="false" ref="embeddedItem">
      <slot name="embeddedItem" :current="currentItem"></slot>
    </span>
    <slot></slot>
  </div>
</template>
